<template>
     <div class="box_bg">
        <div class="components_con">
            <div  class="components_searchs" @keyup.enter="queryTable">
                <el-form :model="table.queryParams" label-position="right" :inline="true">

                    <el-form-item label="学校：">
                        <el-select v-model="table.queryParams.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                            <el-option
                                v-for="item in schoolList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="学院：">
                        <el-select v-model="table.queryParams.secondSchoolId" clearable placeholder="请选择学院" @change="changeSecondSchool">
                            <el-option
                                v-for="item in secondSchoolList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="专业：">
                        <el-select v-model="table.queryParams.professionId" clearable placeholder="请选择专业" @change="changeProfession">
                            <el-option v-for="item in professionList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="mini" type="primary" icon="el-icon-view"
                                    @click="advancedSearchState=!advancedSearchState">高级搜索</el-button>
                    </el-form-item>

                    <div class="components_searchs" v-if="advancedSearchState" @keyup.enter="queryTable">

                        <el-form-item label="班级：">
                            <el-select v-model="table.queryParams.classesIds" clearable placeholder="请选择班级">
                                <el-option
                                    v-for="item in classList"
                                    :key="item.id"
                                    :label="item.text"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="课程：">
                            <el-input v-model="table.queryParams.courseName" auto-complete="off" placeholder="请输入课程"></el-input>
                        </el-form-item>

                    </div>

                </el-form>
            </div>
        </div>
        <!--
            <div class="components_btns">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="showAddClassDialog"
                    >
                新增
                </el-button>
                    <el-button type="primary" size="mini">
                    <i class="el-icon-upload el-icon-right"></i>
                        导出
                    </el-button>
            </div>
        -->
        <div class="">
            <vue-table
                :api-url="table.apiUrl"
                :fields="table.fields"
                :appendParams="table.queryParams"
                :content="self"
                ref="classTable">
            </vue-table>
        </div>
        <attendance-score-add ref="attendanceScoreAdd"></attendance-score-add>
        <attendance-score-detail ref="attendanceScoreDetail"></attendance-score-detail>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    import attendanceScoreAdd from './attendance-score-add'
    import attendanceScoreDetail from './attendance-score-detail'
    export default {
        components: {
            attendanceScoreAdd,
            attendanceScoreDetail,
        },
        data() {
            return {
                self: this,
                advancedSearchState: false,
                table: {
                    apiUrl: api.studentClassroomScore.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        classesIds:null,     // 班级
                        courseName:null,   // 课程
                    },
                    fields: [{
                            prop: "__index",
                            label: "序号",
                        },
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "classesNames",
                            label: "班级",
                        },
                        {
                            prop: "courseName",
                            label: "课程名称",
                        },
                        {
                            prop: "teachWeek",
                            label: "周次",
                            formatter : function(row, column, cellValue){
                                return '第'+cellValue + "周";
                            }
                        },
                        {
                            prop: "week",
                            label: "星期几",
                            formatter : function(row, column, cellValue){

                                let numberList = ["一","二","三","四","五","六","七"]
                                return '星期'+numberList[cellValue-1];
                            }
                        },
                        {
                            prop: "section",
                            label: "节次",
                            formatter : function(row, column, cellValue){
                                return '第'+cellValue + "节";
                            }
                        },
                        {
                            prop: "late1",
                            label: "迟到/早退",
                            formatter : function(row, column, cellValue){
                                let totalNum = row.late1 + row.early2;
                                return totalNum + "人";
                            }
                        },
                        {
                            prop: "miss4",
                            label: "旷课",
                            formatter : function(row, column, cellValue){
                                return cellValue + "人";
                            }
                        },
                        {
                            prop: "leaveAsk3",
                            label: "请假",
                            formatter : function(row, column, cellValue){
                                return cellValue + "人";
                            }
                        },
                        {
                            prop: "attendanceRate",
                            label: "出勤率",
                            formatter: function(row, column, cellValue){
                                return cellValue == null ? "未录入": cellValue+'%';
                            }
                        },
                        {
                            prop: "__component",
                            label: "操作",
                            width: '100px',
                            componentName: "attendanceActions",
                            /*
                            actions: [
                                {
                                    label: "编辑",
                                    type: "edit",
                                    auth:'attendance:add',
                                    func: function(vm, row) {
                                       vm.$refs.attendanceScoreAdd.showDialog(row.lessonId);
                                    }
                                },
                                {
                                    label: "详情",
                                    type: "edit",
                                    auth:'attendance:detail',
                                    func: function(vm, row) {
                                       vm.$refs.attendanceScoreDetail.showDialog(row.lessonId);
                                    }
                                },
                            ]
                            */
                        },
                    ],
                },
                // 二级院校列表
                secondSchoolList: null,
                // 专业列表
                professionList: null,
                // 班级集合
                classList: null,
            }
        },
        created() {
            // 院校树初始化 获取全部院校列表数据
            this.getSchoolList();
        },
        mounted() {},
        computed: {
            ...mapGetters({
                schoolList: 'getSchoolList',
            })
        },
        methods: {
             // 获取院校数据
            getSchoolList() {
                this.$store.dispatch("getSchoolList");
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList, {
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取二级院系数据
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                    params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询学期列表(来自字典)
            getClassList(professionId){
                let vm = this;
                vm.axios.get(api.getClassList,{
                    params:{
                        professionId: professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeSchool(schoolId) {
                this.table.queryParams.secondSchoolId = null;
                this.secondSchoolList = [];
                this.table.queryParams.professionId = null;
                this.professionList = [];
                this.table.queryParams.classesIds = null;
                this.classList = [];
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId) {
                this.table.queryParams.professionId = null;
                this.professionList = [];
                this.table.queryParams.classesIds = null;
                this.classList = [];
                this.getProfessionList(this.table.queryParams.schoolId, secondSchoolId);
            },
            changeProfession(professionId) {
                this.table.queryParams.classesIds = null;
                this.classList = [];
                this.getClassList(professionId);
            },
            queryTable(){
                this.$refs.classTable.$emit('vuetable:refresh')
            },
            resetQuery(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.secondSchoolList = [];
                this.professionList = [];
                this.classList = [];
                this.$refs.classTable.$emit('vuetable:refresh')
            },
        },
    };
</script>
<style scoped>

</style>